<!-- <template>
	<view>
		<firstDetails  :myType="myType" :list="listData"></firstDetails>
	</view>
</template>

<script>
	import {
		firstDetails
	} from "../components/firstDetails.vue"
	export default {
		myType:{
			type:Number,
			default:1
		},
		components: {
			firstDetails
		},
		onLoad(res) {
			let data =JSON.parse(res.data)
			this.listData = data
			this.myType = res.type
			console.log(this.listData,this.myType)
		},
		created(res) {
			console.log(res)
		},
		data() {
			return {
				listData :[]
			};
		}
	}
</script>

<style lang="scss">

</style> -->
<template>
	<view class="firstDetails">
		<AdBnner :list="listData.imgs" height="140"></AdBnner>
		<view class="content">
			<view class="A item">
				<view class="left" v-if="title=='商家报价'">
					{{listData.name}} {{listData.status == 1?'':' （已下架）'}}
				</view>
				<view class="left" v-if="title=='我的报价'">
					{{listData.name}} 
				</view>
				<view class="right">
					需要<text class="red">{{listData.num}}</text>株
				</view>
			</view>
			<view class="B item" v-if="listData.newSpe[0].value">
				<view class="first">
					<view class="b_item" v-for="item in listData.newSpe" :key = "index">
						{{item.name}}：{{item.value}}{{item.unit}}
					</view>
<!-- 					<view class="b_item" v-if="listData.newSpe[0].value">
						{{listData.newSpe[0].name}}：{{listData.newSpe[0].value}}{{listData.newSpe[0].unit}}
					</view>
					<view class="b_item" v-if="listData.newSpe[1].value">
						{{listData.newSpe[1].name}}：{{listData.newSpe[1].value}}{{listData.newSpe[1].unit}}
					</view>
					<view class="b_item" v-if="listData.newSpe[2].value">
						{{listData.newSpe[2].name}}：{{listData.newSpe[2].value}}{{listData.newSpe[2].unit}}
					</view>
					<view class="b_item" v-if="listData.newSpe[3].value">
						{{listData.newSpe[3].name}}：{{listData.newSpe[3].value}}{{listData.newSpe[3].unit}}
					</view>
					<view class="b_item">
						<text class="blue">{{listData.lvl_name}}</text>
					</view> -->
				</view>
<!-- 				<view class="second">
					<view class="b_item" v-if="listData.specs_config[3]">
						{{listData.specs_config[3].name}}：{{listData.specs_config[3].value}}{{listData.specs_config[3].unit}}
					</view>
					<view class="b_item">
						<text class="blue">{{listData.lvl_name}}</text>
					</view>
				</view> -->
			</view>
			<view class="C item">
				<view class="left-details">
					详情说明:
				</view>
				<view class="right-details">
					{{listData.introduction}}
				</view>
			</view>
			<view class="C item">
				<view class="left-details">
					查看电话:
				</view>
				<view class="right-details find">
					<text @click="goTel()">{{phone||'****************'}}</text><text class="blue" @click="telPhone"
						style="margin-left: 20px;">查看号码</text>
				</view>
			</view>
		</view>
		<view class="list-container">
			<view class="top1">
				{{title}}
			</view>
			<view class="list" v-for="item in list1" @click="goDetails(item)" v-if="type==1" :key="item.id">
				<view class="main-container">
					<view class="left-img">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="right-container">
						<view class="top">
							<view class="name">
								<!-- <view class="vip">
										
									</view> -->
								<view class="thing">
									{{listData.name}}{{item.disable == 1|| item.disable == undefined ?'':' （已禁用）'}}
								</view>
							</view>
							<view class="dolor red">
								<text class="sum">总价：{{item.num*item.price}}元</text>
							</view>
						</view>
						<view class="content">
							<view class="content-top">
								<view class="bx">

								</view>
								<view class="gf">

								</view>
								<view class="gd">

								</view>
							</view>
							<view class="center">
								<view class="wz">
									{{item.num}}株
								</view>
								<view class="time">
									{{item.create_time}}
								</view>
							</view>
						</view>
						<view class="intro">
							{{item.address}}
						</view>
					</view>
				</view>
			</view>
			<view class="noMore" v-if="last_page==busList.page&&list1.length!=0" style="text-align: center;color: #797575;margin-top: 20rpx;">
				数据加载完成...
			</view>
			<u-empty text="暂无列表哦~~" mode="list" v-if="list1.length==0" margin-top='50'></u-empty>
		</view>
		<bottomShow :showPop = "showBottom" :title="bottomTitle" :tip="bottomTip" @refuse= "refuse" @submit="subTel"></bottomShow>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		AdBnner
	} from "@/components/ad-banner/ad-banner.vue"
		import bottomShow from '@/components/common/bottomShow.vue'
	import {
		businessQuotelist,
		myOfferMyOfferList,
		getPhone
	} from '@/request/api.js'
	export default {
		components: {
			bottomShow
		},
		props: {
			list: {
				type: Array,
				default: []
			},
			myType: {
				type: Number,
				default: 1
			},

		},
		data() {
			return {
				listData: {},
				busList: {
					page: 1,
					wantbuy_id: ''
				},
				list1: [],
				last_page:1,
				type: 1,
				phone: '',
				form: {
					type: 1,
					id: '',
				},
				title: '商家报价',
				showBottom:false,
				bottomTitle:'',
				bottomTip:''
			};
		},
		components: {
			AdBnner
		},
		onShow() {
			// console.log(this.myType, 333)
		},
		onReachBottom() {
			// this.$refs.community.reachBottom()
			// console.log('到达底部')
			// console.log(this.form.page,this.last_page)
			if (this.busList.page < this.last_page) {
				this.busList.page= this.busList.page + 1
				this.getQuotelist()
			}
		},
		methods: {
			goTel(){
				uni.makePhoneCall({
					phoneNumber: this.phone,
					success(res) {
						cconsole.log('拨打电话成功', res);
					},
					fail(err) {
						console.log('拨打电话失败', err);
					}
				})
			},
			refuse() {
				this.showBottom = false
			},
			telPhone(){
				if(this.phone == ''){
					this.bottomTitle = '查看电话'
					this.bottomTip = '提示：普通会员查看电话需要充值积分，黄金会员或者钻石会员查看电话免费，自己查看自己电话免费！'
					this.showBottom = true
				}else{
					
				}
				
			},
			subTel(){
				getPhone(this.form).then(res=>{
					if(res.code == 1){
						this.phone = res.data.phone
						this.$refs.uToast.show({
							type: 'success',
							title: '获取电话成功',
							message: "获取电话成功",
						})
					}
				})
				this.showBottom = false
			},
			goDetails(item) {
				uni.navigateTo({
					url: '/my_pages/components/secDetails?myType=' + this.myType + '&data=' + item.id + '&name=' +
						this.listData.name
				})
			},
			getQuotelist() {
				if (this.myType == 1) {
					businessQuotelist(this.busList).then(res => {
						// console.log(res)
						if (res.code == 1) {
							this.list1 = res.data.list
							this.last_page=Math.ceil(res.data.total/10)
						}
					})
				} else {
					myOfferMyOfferList(this.busList).then(res => {
						// console.log(res)
						if (res.code == 1) {
							this.list1 = res.data.list
							this.last_page=Math.ceil(res.data.total/10)
						}
					})
				}

			}
		},
		onLoad(res) {
			let data = JSON.parse(res.data)
			this.listData = data
			this.myType = res.type
			// console.log(this.listData,this.myType)
			console.log(this.myType, 333)
			this.type = res.myType
			this.title = this.myType == 1 ? '商家报价' : '我的报价'
			let title = this.myType == 1 ? '我的求购' : '我的报价'
			this.form.type = this.myType == 1 ? 2 : 2
			this.form.id = this.listData.id
			this.busList.wantbuy_id = this.listData.id
			this.getQuotelist()
			uni.setNavigationBarTitle({
				title: title
			});
			this.$forceUpdate();
			// console.log(this.list,res)
		},
		created(res) {

		}

	}
</script>

<style lang="scss" scoped>
	.firstDetails {
		color: #979797;

		.red {
			color: #FD4343;
		}

		.blue {
			color: #00C777;
		}

		.list-container {
			.top1 {
				background-color: #00C777;
				color: #fff;
				width: fit-content;
				margin-left: 15rpx;
				padding: 4px 0;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			padding: 20rpx 15rpx;

			.item {
				padding: 15px 0;
				border-bottom: 1px solid #E2E2E2;
			}

			.A {
				display: flex;
				align-items: center;

				.left {
					color: #00C777;
					flex: 1;
				}

				.right {
					width: 100px;
				}
			}

			.B {
				display: flex;
				flex-direction: column;

				.first {
					display: flex;
					margin-bottom: 20rpx;
					flex-wrap: wrap;
					.b_item {
						// margin-right: 40rpx;
						width: 50%;
					}
				}

				.second {
					display: flex;

					.b_item {
						margin-right: 130rpx;
					}
				}
			}

			.C {
				display: flex;

				.left-details {
					width: 80px;
				}

				.right-details {
					flex: 1;

				}

				.find {
					text-align: right;
					margin-right: 20rpx;
				}
			}

			.D {}
		}

		.list {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-bottom: 15rpx;
			box-shadow: 2px 3px 7px #807e7e4f;
			border-radius: 13rpx;

			.main-container {
				height: 160rpx;
				display: flex;
				padding: 0 20rpx;
				background: #fff;
				font-size: 22rpx;
				padding: 12rpx 0;
				border-bottom: 1px solid #E2E2E2;
				margin: 15rpx;

				.left-img {
					width: 160rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.right-container {
					flex: 1;
					font-size: 22rpx;
					width: 100%;

					.top {
						display: flex;
						border-bottom: 1px solid #E2E2E2;
						justify-content: center;
						align-items: center;
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;

						.name {
							flex: 1;
							color: #00C777;
							display: flex;

							.vip {
								background: #00C777;
								color: #fff;
								border-radius: 25rpx;
								padding: 0 15rpx;
								margin-right: 15rpx;
							}
						}

						.dolor {
							color: #00C777;

							.sum {
								color: #FFAB68;
							}
						}
					}

					.content {
						display: flex;
						flex-direction: column;
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;

						.content-top {
							display: flex;
							margin: 15rpx 0px;

							.bx,
							.gf,
							.gd {
								width: 33.33%;
							}
						}

						.center {
							display: flex;

							.jp,
							.wz,
							.empt {
								width: 33.33%;
							}

							.time {
								width: 100%;
								text-align: right;
							}

							.jp {
								color: #00C777;
							}

							.wz {
								color: #FFAB68;
							}

						}

						.intro {
							color: #C9C9C9;
						}
					}

					.intro {
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;
						color: #C9C9C9;
						width: 220px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
				}
			}

			.list-bottom {
				margin: 15rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #4F4F4F;

				.liulan {
					flex: 1;
				}

				.ck {
					width: 70px;
					color: #fff;
					background-color: #00C777;
					text-align: center;
					border-radius: 26rpx;
					padding: 5rpx 0;
				}
			}
		}
	}
</style>
